{extend name="login_or_register/common" /}

{block name="body"}
<div class="ui stacked segment blue">
    <form id="form" name="form" method="post" action="{:url('checkLogin')}" autocomplete="off">
        <div class="field">
            <div class="ui icon input">
                <i class="user icon"></i>
                <input id="account" name="account" type="text" placeholder="用户名" autocomplete="off">
            </div>
        </div>
        <div class="field">
            <div class="ui icon input">
                <i class="lock icon"></i>
                <input id="password" name="password" type="password" placeholder="密码" autocomplete="off">
            </div>
        </div>
        <div class="field">
            <div class="ui icon input">
                <a> <img class="reloadverify" src="{:url('captcha')}" id="imgcode"
                         onClick="this.src=this.src+'?rand='+Math.random()"
                         alt="captcha"></a>
            </div>
        </div>
        <div class="field">
            <div class="ui icon input">
                <input id="code" name="code" type="text" placeholder="验证码" autocomplete="off">
            </div>
        </div>
        <input type="submit" id="login" value="登录" class="ui fluid large teal submit  button">
    </form>
</div>
<div class="ui message">
    新用户? <a href="{:url('register')}">注册</a>
</div>

<!--ajax异步提交-->
<script>
    //检验用户名格式
    function checkname(name) {
        if (name.length < 5 || name.length > 14) {
            layer.msg('用户名格式错误');
            return false;
        }
        return true;
    }

    //检查密码格式
    function checkpassword(password) {
        if (password.length < 6 || password.length > 16) {
            layer.msg("格式错误，密码长度为6-16位");
            return false;
        }
        return true;
    }

    $('form').submit(function () {
        var account = $("input[name='account']").val();
        var password = $("input[name='password']").val();
        var code = $("#code").val();

        if(!checkname(account))
        {
            return false;
        }
        if(!checkpassword(password))
        {
            return false;
        }
        if (!code) {
            layer.msg('验证码不能为空！');
            return false;
        }
        var url = $(this).attr('action');
        var formData = $("#form").serialize();
        $.ajax({
            type: "post",
            url: url,
            dataType: "json",
            data: formData,
            success: function (res) {
                if (res.status) {
                    layer.msg(res.message, {time: 1000}, function () {
                        window.location.href = "{:url('Index/index')}";
                    });
                } else {
                    //刷新验证码
                    $(".reloadverify").click();
                    layer.msg(res.message);
                }
            }
        });
        return false;
    });
</script>
{/block}

